<!--  -->
<template>
  <div class="my-container">
    <van-nav-bar title="我的资料">
      <template #left>
        <i class="iconfont iconbtn_nav_back left" @click="toBack"></i>
      </template>
    </van-nav-bar>
    <div class="main-box">
      <van-cell class="tou" title="头像" is-link to="/avatar">
        <span>
          <img src="../../assets/dog.jpeg" alt="" />
        </span>
      </van-cell>
      <van-cell-group>
        <van-cell title="名称" is-link value="oaief" to="/nickname" />
        <van-cell title="性别" is-link value="男" @click="showPopupSex" />
        <van-cell title="地区" is-link value="深圳市" @click="showArea" />
        <van-cell title="个人简介" is-link value="" to="/area" />
      </van-cell-group>

      <button class="btn" @click="doLogout">退出登录</button>
    </div>

    <!-- 性别弹出框 -->
    <van-popup
      class="pop-gender"
      v-model="showPopup"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker show-toolbar :columns="columns_gen" />
    </van-popup>

    <!-- 城市 -->
    <van-popup
      class="pop-area"
      v-model="showAreaCity"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker show-toolbar :columns="columns" @change="onChange" />
    </van-popup>
  </div>
</template>

<script>
// import { editUserInfoAPI, fileUpAPI } from '@/api'
const cities = {
  浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
  福建: ['福州', '厦门', '莆田', '三明', '泉州']
}
export default {
  data () {
    return {
      showPopup: false,
      showAreaCity: false,
      columns_gen: ['外星人', '男孩', '女孩'],
      columns: [{ values: Object.keys(cities) }, { values: cities['福建'] }]
    }
  },

  methods: {
    toBack () {
      this.$router.back()
    },
    // 选择性别
    showPopupSex () {
      this.showPopup = true
    },

    // 选择城市
    showArea () {
      this.showAreaCity = true
    },

    onChange (picker, values) {
      picker.setColumnValues(1, cities[values[0]])
    },

    // 退出登录
    doLogout () {
      this.$dialog
        .confirm({
          title: '标题',
          message: '您确认退出吗?'
        })
        .then(() => {
          // on confirm
          this.$store.commit('user/logout')
          this.$router.push({
            path: '/login'
          })
        })
        .catch(() => {
          // on cancel
          this.$router.back()
        })
    }
  }
}
</script>

<style lang="less" scoped>
.my-container {
  .van-nav-bar {
    .left {
      position: absolute;
      left: 0;
      padding-left: 0;
      font-size: 50px;
    }
  }
  .main-box {
    background-color: #f6f7f7;
    padding: 18px;
    .tou {
      height: 60px;
      align-items: center;
      margin-bottom: 14px;
      border-radius: 10px;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        text-align: right;
        vertical-align: middle;
      }
    }

    .van-cell-group {
      align-items: center;
      border-radius: 10px;
      margin-bottom: 14px;
    }
    .btn {
      width: 100%;
      height: 50px;
      border-radius: 10px;
      border: 1px solid #ebedf0;
      font-size: 15px;
      color: red;
      font-weight: 600;
      background-color: #ffffff;
    }
  }
}
</style>
